<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
    */

      html,
      body,
      div,
      span,
      applet,
      object,
      iframe,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      blockquote,
      pre,
      a,
      abbr,
      acronym,
      address,
      big,
      cite,
      code,
      del,
      dfn,
      em,
      img,
      ins,
      kbd,
      q,
      s,
      samp,
      small,
      strike,
      strong,
      sub,
      sup,
      tt,
      var,
      b,
      u,
      i,
      center,
      dl,
      dt,
      dd,
      ol,
      ul,
      li,
      fieldset,
      form,
      label,
      legend,
      table,
      caption,
      tbody,
      tfoot,
      thead,
      tr,
      th,
      td,
      article,
      aside,
      canvas,
      details,
      embed,
      figure,
      figcaption,
      footer,
      header,
      hgroup,
      menu,
      nav,
      output,
      ruby,
      section,
      summary,
      time,
      mark,
      audio,
      video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }

      /* HTML5 display-role reset for older browsers */
      article,
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }

      body {
        line-height: 1;
      }

      ol,
      ul {
        list-style: none;
      }

      blockquote,
      q {
        quotes: none;
      }

      blockquote:before,
      blockquote:after,
      q:before,
      q:after {
        content: "";
        content: none;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
      }
    </style>
  </head>

  <body>
    <script>
      // 拖拽上传
      function useDrag(element) {
        // 上传文件最大值
        const MAX_FILE_SIZE = 1024 * 1024 * 1024 * 2;

        element.addEventListener("dragenter", handleDrag);
        element.addEventListener("dragover", handleDrag);
        element.addEventListener("drop", drop);
        element.addEventListener("dragleave", handleDrag);

        function handleDrag(event) {
          event.preventDefault(); //阻止默认事件
          event.stopPropagation(); //阻止事件传播
          // console.warn(event);
        }

        function drop(event) {
          e.preventDefault(); //阻止默认事件
          e.stopPropagation(); //阻止事件传播

          checkFile(e.dataTransfer.files);
        }

        function checkFile(event) {
          console.warn(event);
          const file = event[0];

          // 文件不能为空
          if (!file) {
            throw new Error("没有选择任何文件");
            return;
          }

          // 判断文件不能超过2G
          if (file.size > MAX_FILE_SIZE) {
            throw new Error("文件大于最高上传要求");
            return;
          }

          // 指定文件类型 限定只能为图片或视频
          if (
            file.type.startsWith("image/") ||
            file.type.startsWith("video/")
          ) {
            throw new Error("文件类型不符合");
            return;
          }

          selectedFile(file);
        }

        function selectedFile(event) {}
      }

      // 防抖
      function debounce(fn, delay = 500) {
        let time = "";
        return function () {
          clearTimeout(time);
          time = setTimeout(() => {
            fn.apply(this, arguments);
          }, delay);
        };
      }

      // 节流
      function throttle(fn, delay = 1500) {
        let nowTime = Date.now();
        return function () {
          let lastTime = Date.now();
          if (lastTime - nowTime > delay) {
            fn(...arguments);
            nowTime = lastTime;
          }
        };
      }

      // 将 url 问号后面的查询字符串转为对象(小程序不支持)
      function parseQuery(query) {
        Object.fromEntries(new URLSearchParams(query));
      }
      parseQuery("name=John&age=30");

      // 数组扁平化
      function arrFlatten() {
        // 如果数组里都是数字类型或字符串  可以用这个方法去处理
        // console.warn(arr.toString().split(","));
        // console.warn(arr.flat(Infinity));
        let list = [];

        arr.forEach((element) => {
          if (Array.isArray(element)) {
            list = list.concat(arrFlatten(element));
          } else {
            list.push(element);
          }
        });

        return list;
      }
      arrFlatten([1, [2, [3, 4, 5]]]);

      // 数组参数计算总数
      function addFn(arr) {
        return arr.reduce((all, cur) => (all += cur));
      }
      addFn([1, 2, 3, 4, 5]);
    </script>
  </body>
</html>
